<template>
  <div>
    <el-dialog title="产品" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">

        <el-form-item label="产品名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <!-- <el-form-item label="产品类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="限购金额" value="limit_money"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="产品描述" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="是否新手产品" prop="isRookiePro">
          <el-select v-model="form.isRookiePro" placeholder="请选择">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="利息发放周期" prop="interestCycle">
          <el-input v-model="form.interestCycle" />
        </el-form-item> -->
        <!-- <el-form-item label="利息" prop="interest">
          <el-input v-model="form.interest" />
        </el-form-item> -->
        <div v-for="(item, index) in form.lockDayConfig">
          <el-divider content-position="center">定期{{ index + 1 }} <i v-if="index > 0" class="el-icon-delete"
              @click="delLock(index)" />
          </el-divider>
          <el-form-item label="时长" :prop="'lockDayConfig.' + index + '.lockDay'" :rules="{
            required: true, message: '时长不能为空', trigger: 'blur'
          }">
            <el-input v-model="item.lockDay" :disabled="form.id ? true : false" />
          </el-form-item>
          <el-form-item label="返回比率" :prop="'lockDayConfig.' + index + '.returnRate'" :rules="{
            required: true, message: '返回比率', trigger: 'blur'
          }">
            <el-input v-model="item.returnRate" :disabled="form.id ? true : false" />
          </el-form-item>
        </div>

        <el-button v-if="!form.id" style="margin: 10px auto;display: block;" @click="addDate">新增定期</el-button>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="是否上架" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="上架" value="1" />
            <el-option label="下架" value="0" />
          </el-select>
        </el-form-item>
        <div v-for="(item, index) in form.limitMoney" :key="index">
          <el-divider content-position="center">规格{{ index + 1 }} <i v-if="index > 0" class="el-icon-delete"
              @click="delInt(index)" />
          </el-divider>

          <el-form-item label="复购起步金额" :prop="'limitMoney.' + index + '.reinvestAmount'" :rules="{
            required: true, message: '复购起步金额不能为空', trigger: 'blur'
          }">
            <el-input v-model="item.reinvestAmount" />
          </el-form-item>
          <el-form-item label="最高金额" :prop="'limitMoney.' + index + '.maxAmount'" :rules="{
            required: true, message: '最高金额不能为空', trigger: 'blur'
          }">
            <el-input v-model="item.maxAmount" />
          </el-form-item>
          <el-form-item label="最低金额" :prop="'limitMoney.' + index + '.minAmount'" :rules="{
            required: true, message: '最低金额不能为空', trigger: 'blur'
          }">
            <el-input v-model="item.minAmount" />
          </el-form-item>
          <el-form-item label="总限购金额" :prop="'limitMoney.' + index + '.sumLimitMoney'" :rules="{
            required: true, message: '总限购金额不能为空', trigger: 'blur'
          }">
            <el-input v-model="item.sumLimitMoney" />
          </el-form-item>
          <el-form-item label="日利率" :prop="'limitMoney.' + index + '.interest'" :rules="{
            required: true, message: '日利率不能为空', trigger: 'blur'
          }">
            <el-input v-model="item.interest" />
          </el-form-item>
          <el-form-item label="状态" :prop="'limitMoney.' + index + '.status'" :rules="{
            required: true, message: '状态不能为空', trigger: 'blur'
          }">
            <el-select v-model="item.status" placeholder="请选择">
              <el-option v-for="item in statusArray" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <el-button style="margin: 10px auto;display: block;" @click="addGG">新增规格</el-button>
        <el-form-item label="产品类别icon" prop="cover">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
            :on-success="handleAvatarSuccess" :headers="{ 'Authorization': Authorization }">
            <img v-if="form.cover" :src="form.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="产品内容图片" prop="picture">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
            :on-success="handleAvatarSuccess2" :headers="{ 'Authorization': Authorization }">
            <img v-if="form.picture" :src="form.picture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { productSaveOrUpdate, action } from '@/api/table'
import { getToken } from '@/utils/auth'

export default {

  data() {
    return {
      pn: 0,
      loadingState: false,
      dialogVisible: false,
      videoStatae: false,
      fileList: [],
      video: null,
      upLoadProgress: 0,
      actionUrl: '',
      Authorization: '',
      statusArray: [
        { title: '上架', value: 'hot_selling' },
        { title: '下架', value: 'not_open' }

      ],
      form: {
        'cover': '',
        'picture': '',
        'description': '',
        'id': '',
        'interestCycle': '',
        'isRookiePro': '',
        'limitMoney': [{
          'id': '',
          'maxAmount': '',
          'minAmount': '',
          'productId': '',
          'sumLimitMoney': '',
          'reinvestAmount': '',
          'interest:': '',
          'status': ''
        }],
        lockDayConfig: [
          { lockDay: '', returnRate: '' }
        ],

        'lockDays': '',
        'name': '',
        'sort': '',
        'status': '',
        'type': 'limit_money'
      },
      rules: {

        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入产品描述', trigger: 'blur' }
        ],

        isRookiePro: [
          { required: true, message: '请选择是否新手产品', trigger: 'blur' }
        ],
        lockDays: [
          { required: true, message: '请输入定期时长', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择上下架', trigger: 'change' }
        ],
        cover: [
          { required: true, message: '请选择产品类别icon', trigger: 'change' }
        ],
        picture: [
          { required: true, message: '请选择产品内容图片', trigger: 'change' }
        ]

      }
    }
  },

  methods: {
    addGG() {
      if (this.form.limitMoney.length >= 3) {
        return false
      }
      this.form.limitMoney.push({
        'id': '',
        'maxAmount': '',
        'minAmount': '',
        'productId': '',
        'sumLimitMoney': '',
        'reinvestAmount': '',
        'interest:': '',
        'status': ''
      })
    },
    delInt(index) {
      this.form.limitMoney.splice(index, 1)
    },
    delLock(index) {
      this.form.lockDayConfig.splice(index, 1)
    },
    onSubmit() {
      this.form.lockDays = 0
      this.form.lockDayConfig.map(item => {
        this.form.lockDays += Number(item.lockDay)
      })
      this.$refs['form'].validate((valid) => {
        if (valid) {
          productSaveOrUpdate(this.form).then(res => {
            this.$parent.fetchData()
            this.dialogVisible = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    show() {
      this.resetForm()
      this.actionUrl = process.env.VUE_APP_BASE_API + action()
      this.Authorization = 'Bearer ' + getToken()
      this.dialogVisible = true
    },
    addDate() {
      this.form.lockDayConfig.push({
        lockDay: '',
        returnRate: ''
      })
    },

    edit(e) {
      console.log(e)
      this.actionUrl = process.env.VUE_APP_BASE_API + action()
      this.Authorization = 'Bearer ' + getToken()
      this.form = JSON.parse(JSON.stringify(e))
      this.form.type = 'limit_money'
      this.dialogVisible = true
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.cover = res.data
    },
    handleAvatarSuccess2(res, file) {
      console.log(res)
      this.form.picture = res.data
    },

    resetForm() {
      this.form = {
        'cover': '',
        'picture': '',

        'description': '',
        'id': '',
        'interestCycle': '',
        'isRookiePro': '',
        'limitMoney': [
          {
            'id': '',
            'maxAmount': '',
            'minAmount': '',
            'productId': '',
            'sumLimitMoney': '',
            'reinvestAmount': '',
            'interest:': '',
            'status': ''
          }
        ],
        lockDayConfig: [
          { lockDay: '', returnRate: '' }
        ],
        'lockDays': '',
        'name': '',
        'sort': '',
        'status': '',
        'type': 'limit_money'
      }
    }

  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
